<template>
	<view class="app">
		<view class="cell b-b">
			<text class="tit fill">账号</text>
			<input class="input" v-model="userInfo.userNum" placeholder="请输入账号(建议使用手机号)" type="text">
		</view>
		<view class="cell b-b">
			<text class="tit fill">昵称</text>
			<input class="input" v-model="userInfo.username" type="text" maxlength="8" placeholder="请输入昵称" placeholder-class="placeholder">
		</view>
		<view class="cell b-b">
			<text class="tit fill">性别</text>
			<view class="checkbox center" @click="changeGender('男')">
				<text v-if="userInfo.sex == '男'" class="mix-icon icon-xuanzhong"></text>
				<text v-else class="mix-icon icon-yk_yuanquan"></text>
				<text>男</text>
			</view>
			<view class="checkbox center" @click="changeGender('女')">
				<text v-if="userInfo.sex == '女'" class="mix-icon icon-xuanzhong"></text>
				<text v-else class="mix-icon icon-yk_yuanquan"></text>
				<text>女</text>
			</view>
		</view>
		<view class="cell b-b">
			<text class="tit fill">生日</text>
			<gpp-date-picker class="input" @onCancel="onCancel" @onConfirm="onBirthday" :startDate="startDate" :endDate="endDate" :defaultValue="userInfo.birthday">
			    {{userInfo.birthday}}
			</gpp-date-picker>
		</view>
		
		<view class="cell  b-b">
			<text class="tit fill">手机号</text>
			<input class="input" type="number" maxlength="11" v-model="userInfo.phone" placeholder="请输入手机号码" placeholder-class="placeholder" />
		</view>
		<view class="cell  b-b">
			<text class="tit fill">邮箱</text>
			<input class="input" v-model="userInfo.email" placeholder="请输入邮箱" placeholder-class="placeholder" />
		</view>
		<view class="password">注：初始密码为：12345678</view>
		<mix-button ref="confirmBtn" text="立即注册" marginTop="80rpx" @onConfirm="confirm"></mix-button>
	</view>
</template>

<script>
	import {registerUser} from '@/common/js/api'
	import {checkStr} from '@/common/js/util'
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import dayjs from 'dayjs';
	export default {
		components:{
			gppDatePicker
		},
		data() {
			return {
				tempAvatar: '', 
				userInfo: {
					birthday: '2021-05-19',
					avatar:'',
					username:'',
					sex:'',
					phone:'',
					userNum:'',
					email:''
				},
				startDate: "1900-01-01",
				endDate: "2050-01-01",
			}
		},
		onLoad() {
		},
		methods: {
			 onCancel(e){
				console.log(e);
			},
			onBirthday(e){
				this.$set(this.userInfo, 'birthday', e.dateValue)
			},
			//提交修改
			async confirm(){
				const { userInfo } = this;
				if(!userInfo.userNum){
					this.$util.msg('请输入您的账号');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!userInfo.username){
					this.$util.msg('请输入您的昵称');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!userInfo.sex){
					this.$util.msg('请选择您的性别');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!checkStr(userInfo.phone, 'mobile')){
					this.$util.msg('请输入正确的手机号码');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!checkStr(userInfo.email, 'email')){
					this.$util.msg('请输入正确的邮箱');
					this.$refs.confirmBtn.stop();
					return;
				}
				console.log(userInfo);
				const res = await registerUser(userInfo);
				console.log(res);
				this.$refs.confirmBtn.stop();	
				if(res.code === 200){
					this.$util.msg("注册成功，请登录！");
					setTimeout(()=>{
						uni.navigateBack();
					}, 1000)
				}else{
					this.$util.msg(res.msg);
				}
			},
			//修改性别
			changeGender(sex){
				this.$set(this.userInfo, 'sex', sex)
			},
			//公开信息
			onSwitch(e){
				this.userInfo.anonymous = !e.detail.value;
			}
		}
	}
</script>

<style scoped lang="scss">
	.app{
		padding-top: 16rpx;
	}
	.cell{
		display: flex;
		align-items: center;
		min-height: 110rpx;
		padding: 0 40rpx;
		
		&:first-child{
			margin-bottom: 10rpx;
		}
		&:after{
			left: 40rpx;
			right: 40rpx;
			border-color: #d8d8d8;
		}
		.tit{
			font-size: 30rpx;
			color: #333;
		}
		.avatar-wrap{
			width: 120rpx;
			height: 120rpx;
			position: relative;
			border-radius: 100rpx;
			overflow: hidden;
			
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}
			.progress{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				box-shadow: rgba(0,0,0,.6) 0px 0px 0px 2005px;
				border-radius: 100rpx;
				transition: .5s;
				opacity: 0;
				
				&.no-transtion{
					transition: 0s;
				}
				&.show{
					opacity: 1;
				}
			}
		}
		.input{
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
		}
		switch{
			margin: 0;
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}
		.tip{
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
		.checkbox{
			padding: 12rpx 0 12rpx 40rpx;
			font-size: 28rpx;
			color: #333;
			
			.mix-icon{
				margin-right: 12rpx;
				font-size: 36rpx;
				color: #ccc;
			}
			.icon-xuanzhong{
				color: $base-color;
			}
		}
	}
	.password{
		display: flex;
		align-items: center;
		min-height: 80rpx;
		padding: 0 40rpx;
		font-size: 24rpx;
		color: #808080;
	}
</style>
